<template>
  <div class="c-modal" ref="modal">
    <a-modal
      v-model="status"
      :width="width"
      :title="title"
      :getContainer="getContainer ? null : () => $refs.modal"
      :confirm-loading="okLoading"
      :destroyOnClose="destroyOnClose"
      @ok="handleOk"
      @cancel="handleCancel"
      :afterClose="afterClose"
      :okText="okText"
      :cancelText="cancelText"
      :maskClosable="maskClosable"
      :keyboard="false"
      :closable="closeable"
      :footer="noFooter ? '' : undefined"
      :centered="centered"
      :bodyStyle="compact ? compactStyle : bodyStyle"
      :dialogClass="dialogClass"
    >
      <slot />
      <template v-slot:footer v-if="$slots.footer">
        <slot name="footer" />
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean
    },
    // 内容容器样式
    bodyStyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 紧凑内容容器样式
    compact: {
      type: Boolean,
      default: false
    },
    centered: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: () => {
        return "温馨提示";
      }
    },
    width: {
      type: [String, Number],
      default: () => {
        return 520;
      }
    },
    maskClosable: {
      type: Boolean,
      default: false
    },
    // 关闭后销毁内容
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    okLoading: {
      type: Boolean,
      default: false
    },
    // 确定按钮文案
    okText: {
      type: String,
      default: "确定"
    },
    // 取消按钮文案
    cancelText: {
      type: String,
      default: "取消"
    },
    // 是否隐藏footer
    noFooter: {
      type: Boolean,
      default: false
    },
    // 是否显示右上角的关闭按钮
    closeable: {
      type: Boolean,
      default: true
    },
    // 指定 Modal 挂载的 HTML 节点,false挂载自身，true挂载body
    getContainer: {
      type: Boolean,
      default: false
    },
    // 可用于设置浮层的类名
    dialogClass: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      compactStyle: {
        width: "300px",
        boxSizing: "content-box",
        margin: "0 auto"
      }
    };
  },
  computed: {
    status: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    }
  },
  methods: {
    handleOk() {
      this.$emit("ok");
    },
    handleCancel() {
      this.$emit("cancel");
    },
    // 完全关闭后的回调
    afterClose() {
      this.$emit("afterClose");
    }
  }
};
</script>
